<template>
  <div>
    <van-nav-bar class="ganavbar" title="模块一览" left-arrow 
    @click-left="handleMenuLeft()"/>
    <div class="menu">
      <touch-ripple class="item" v-for="(item, index) in menus" :key="index"
        @click.native="handleMenuItemClick(item)">
        <div class="c" :style="{background: 'url(' + menuBgs[index]+ ')',
        'background-size': '100% 100%'}">
          <div class="icon">{{item.fzr}}</div>
          <div class="name">{{item.name}}</div>
        </div>
      </touch-ripple>
    </div>

    <div class="split">
      项目背景： 原图是截的我们公司移动部的APP,安卓原生做的。 </div>
    <div class="version">V:1.0.1</div>
  </div>
</template>
<script>
import { Popup } from "vux";
var img0 = require('static/imgs/1.png');
var img1 = require('static/imgs/2.png');
var img2 = require('static/imgs/3.png');
var img3 = require('static/imgs/4.png');

var img10 = require('static/imgs/11.png');
var img11 = require('static/imgs/12.png');
var img12 = require('static/imgs/13.png');
var img13 = require('static/imgs/14.png');
export default {
  name: "Login",
  components: {
    Popup
  },
  data () {
    const menus = [
       {
        name: "门店管理", path: '/mdgl', fzr: '仰一鸣'
      },
      {
        name: "企业查询", path: '/qycx', fzr: '顾越'
      },
      {
        name: "检查任务", path: '/jcrw', fzr: '顾越'
      },
      {
        name: "案件审批", path: '/ajsp', fzr: '李澄威'
      },
      {
        name: "简易程序", path: '/jycx', fzr: '仰一鸣'
      },
      {
        name: "一般程序", path: '/ybcx', fzr: '黄宇峰+仰'
      },
      {
        name: "权力清单", path: '/qlqd', fzr: '刘一彬'
      },
      {
        name: "双向推送", path: '/sxts', fzr: '刘一彬'
      }
      
    ];
    const foos = [
      {
        name: "每日事项", path: '/mrsx'
      },
      {
        name: "安保人员", path: '/baxx'
      },
      {
        name: "重点目标", path: '/zdmb'
      },
      {
        name: "企业检查", path: '/qyjc'
      }
    ];
    return {
      menus,
      foos,
      menuBgs: [img0, img1, img2, img3, img3, img2, img1, img0],
      menuIcons: [img10, img11, img12, img13, img10, img11, img12, img13],
      showMorePopup: false,
      moreItem: ''
    };
  },
  methods: {
    handleMenuLeft: function () {
      history.go(-1);
    },
    handleMenuItemClick: function (item) {
      if (item.path) {
        var error = item.filter && item.filter();
        if (error) {
          this.$vux.toast.text(error, "bottom");
          return;
        }
        this.$router.push({ path: item.path });
      }
    }
  },
  mounted: function () {
  }
};
</script>

<style lang="scss" scoped>
.menu {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: calc(25% - 41px);
    padding: 20px;
    background: #fff;
    display: flex;
    justify-content: space-around;
    .c {
      width: 60px;
      height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      img {
        width: 30px;
      }
      .name {
        color: #fff;
        font-size: 14px;
        margin-top: -10px;
      }
    }
  }
}
.version {
  position: absolute;
  bottom: 10px;
  color: #cfcfcf;
  left: 48%;
}
</style>
